<!doctype html><html><head>
  <title>Hello HTML5::Canvas world</title>
<script src="../canvas.vml.js"></script>
<script src="../canvas.js"></script>
<script>
function oncanvasready(canvasNodes) {
    var ctx = canvasNodes[0].getContext("2d");

    ctx.textBaseline = "top";
    ctx.font = "32pt Arial";
    ctx.fillStyle = "black";
    ctx.shadowColor = "gray";
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 5;
    ctx.fillText("YES", 0, 0);
    ctx.fillText("WE", 0, 40);
    ctx.fillText("CANVAS!", 0, 80);
}
</script>
  <style type="text/css">
    body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
    h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
    h2 { font-size: 100%; color: #036; }
    pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
  </style>
</head>
<body>
    <h1>A <code>hello world</code> example</h1>
    <div>
      <canvas id="canvas" class="flash silverlight vml" width="500" height="200"></canvas>
      <pre>
&lt;canvas id="canvas" class="flash silverlight vml" width="500" height="200"&gt;&lt;/canvas&gt;

function oncanvasready(canvasNodes) {
//  var ctx = document.getElementById("canvas").getContext("2d");
    var ctx = canvasNodes[0].getContext("2d");

    ctx.textBaseline = "top";
    ctx.font = "32pt Arial";
    ctx.fillStyle = "black";
    ctx.shadowColor = "gray";
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 5;
    ctx.fillText("YES", 0, 0);
    ctx.fillText("WE", 0, 40);
    ctx.fillText("CANVAS!", 0, 80);
}
      </pre>
    </div>
</body>
</html>
